// pages/test/test.js
var api = require('../../api.js');
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    qrcode: null,
    user_info: [],
    head_pic: "",
    logo: "/images/icon-store.png",
    windowWidth: null,
    windowHeight: null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var page = this;
    // 获取屏幕宽高
    wx.getSystemInfo({
      success: function (res) {
        page.setData({
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight
        })
      }
    })

    var head_pic = wx.getStorageSync("head_pic");
    var qrcode = wx.getStorageSync("qrcode");
    if (head_pic) {
      page.setData({
        head_pic: head_pic
      })
    } else {
      page.getavatar();
    }

    if (qrcode) {
      page.setData({
        qrcode: qrcode
      })
    } else {
      page.getQrcode();
    }
    wx.showLoading({
      title: '图片正在生成',
    })
    setTimeout(function () {
      page.click();
      wx.hideLoading();
    }, 2000)

  },

  // 下载头像
  getavatar: function () {
    var page = this;
    var head_pic = app.globalData.Wxuser.head_pic;

    wx.downloadFile({
      url: head_pic, //下载的头像地址
      success: function (res) {
        wx.setStorageSync("head_pic", res.tempFilePath);
        page.setData({
          head_pic: res.tempFilePath
        })
      },
      fail: function (res) {}
    })
  },

  click: function () {
    var page = this;
    var myName = app.globalData.Wxuser.nickname;
    if(myName.length>8){
    var myName=myName.slice(0,7)+'...'
    }
    var myImage = page.data.head_pic;
    var myLogo = page.data.logo;
    var qrcode = page.data.qrcode;
    var H = page.data.windowHeight;
    var W = page.data.windowWidth;
    // canvas画图
    const ctx = wx.createCanvasContext('shareCanvas')

    ctx.beginPath()
    ctx.setFillStyle('#ffffff')
    ctx.fillRect(0, 0, W, H);
    ctx.draw(true)
    ctx.closePath()
    ctx.beginPath()
    ctx.drawImage(myLogo, W / 2 - 107, H * 0.05, 60, 60);
    ctx.draw(true)
    ctx.closePath()
    ctx.beginPath()
    ctx.font = "18px Arial";
    ctx.setFillStyle('#333');
    ctx.fillText('希尔顿', W / 2 - 38, H * 0.09);
    ctx.draw(true)
    ctx.closePath()
    ctx.beginPath()
    ctx.font = "15px Arial";
    ctx.setFillStyle('#333');
    ctx.fillText('做中国人自己的牙刷', W / 2 - 38, H * 0.13);
    ctx.draw(true)
    ctx.closePath()
    ctx.beginPath()
    ctx.drawImage(qrcode, W / 2 - 85, H * 0.18, 150, 150);
    ctx.draw(true)
    ctx.closePath()
    ctx.beginPath()
    ctx.font = "14px Arial";
    ctx.setFillStyle('#333');
    ctx.fillText('识别图中二维码', W / 2 - 58, H / 2);
    ctx.draw(true)
    ctx.closePath()
    // ctx.beginPath()
    // ctx.font = "14px Arial";
    // ctx.setFillStyle('#333');
    // ctx.fillText('开启美丽新旅程', 140, 300);
    // ctx.draw(true)
    // ctx.closePath()
    ctx.beginPath()
    ctx.setFillStyle('#a2a2a2')
    ctx.fillRect(0, H * 0.8 * 0.7, W, 100);
    ctx.draw(true)
    ctx.closePath()

    ctx.beginPath()
    ctx.font = "14px Arial";
    ctx.setFillStyle('#fff')
    ctx.fillText('我是', W / 2 - 28, H * 0.8 * 0.7 + 30);
    ctx.draw(true)
    ctx.closePath()
    ctx.beginPath()
    ctx.font = "14px Arial";
    ctx.setFillStyle('orange')
    ctx.fillText(myName, W / 2, H * 0.8 * 0.7 + 30);
    ctx.draw(true)
    ctx.closePath()
    ctx.beginPath()
    ctx.font = "14px Arial";
    ctx.setFillStyle('#fff');
    ctx.fillText("我为希尔顿牙刷代言", W / 2 - 28, H * 0.8 * 0.7 + 55);
    ctx.draw(true)
    ctx.closePath()

    ctx.beginPath();
    ctx.arc(W / 2 - 108 + 30, H * 0.8 * 0.7 + 15 + 30, 30, 0, Math.PI * 2, true);
    ctx.setLineWidth(6)
    ctx.setStrokeStyle('#a2a2a2')
    ctx.stroke(); //画空心圆
    ctx.closePath();
    ctx.save();
    ctx.arc(W / 2 - 108 + 30, H * 0.8 * 0.7 + 15 + 30, 30, 0, Math.PI * 2, true)
    ctx.clip(); //裁剪上面的圆形
    ctx.drawImage(myImage, W / 2 - 108, H * 0.8 * 0.7 + 15, 60, 60);
    ctx.draw(true);

  },
  // 图片生成圆角1

  // 获取二维码接口
  getQrcode: function () {
    // wx.showLoading({
    //   title: "正在生成二维码",
    // });
    var page = this;
    app.request({
      url: api.user.userQrcode,
      data: {
        token: app.globalData.token,
      },
      success: function (res) {
        if (res.code == 1) {
          var qrcode = res.data;
          //我这里的imgurl是已经请求出来的图片路径。这里需要注意的是，img的域名如果是http的可能要改为https的，不然后面图片不会出来。
          wx.setStorage({ //数据存储下来，当时做这个需求时并没有存储，直接下载的图片去绘制的，但是电脑上可以出来，手机不能。所以就多了这一步，有点坑
            key: "qrcode",
            data: qrcode,
            success: function (res) {
              // 下载图片
              wx.downloadFile({
                url: qrcode,
                success: function (res) {
                  wx.setStorageSync("qrcode", res.tempFilePath);
                  page.setData({
                    qrcode: res.tempFilePath
                  })
                }
              })
            }
          })

        } else {
          wx.showToast({
            title: res.msg,
            image: "/images/icon-warning.png"
          })
        }
        // wx.hideLoading();
      }
    });
  },
  savePic: function () {
    wx.canvasToTempFilePath({　　　　 //通过id 指定是哪个canvas
      canvasId: 'shareCanvas',
      fileType: 'png',
      quality: 1,
      success(res) {　
        wx.previewImage({
          urls: [res.tempFilePath], // 需要预览的图片http链接列表
          current: res.tempFilePath,
        });
      }
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {}
})